<template>
    <div class="index">
        <el-alert
                title="只允许上传.xlsx和.csv文件, 最大只能上传100Mb的文件, 如果上传成功会显示已上传的文件"
                type="warning"
                center
                show-icon>
        </el-alert>
        <el-button @click="goHome" type="primary" class="button" icon="el-icon-s-home" round>主菜单</el-button>
        <el-upload
                class="upload-demo"
                drag
                action="http://localhost:8881/uploadFile"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将excel文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-button size="small" type="primary" @click="getData" id="button">生成选项</el-button>
        <el-checkbox-group
                v-model="checkedCities"
                :min="0"
                :max="3"
        class="checkbox">
            <el-checkbox v-for="index in cities" :label="index" :key="index">{{index}}</el-checkbox>
        </el-checkbox-group>
        <el-button size="small" type="primary" @click="getParse" :disabled="able" id="button1">开始分析</el-button>
        <el-table
                :data=parseData
                stripe
                style="width: 70%"
                class="table">
            <el-table-column
                    prop="from"
                    label="项目名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="conf"
                    label="相关度"
                    >
            </el-table-column>
            <el-table-column
                    prop="to"
                    label="项目名称">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {getFileData,getParseData} from "../../network/parse"
    export default {
        data() {
            return {
                checkedCities: [],
                cities: [],
                fileList: [],
                able: true,
                temp: ["抽样地点_2*","食品亚类","所在省份*"],
                parseData: []
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            async getData(){
                const res=await getFileData();
                this.cities=res.data;
                this.checkedCities=[];
                this.able=false;
                this.$alert('请选择三项数据进行分析', {
                    confirmButtonText: '确定'
                });

            },
            goHome(){
                this.$router.push('/')
            },
            async getParse(){
                const res=await getParseData(this.temp);
                console.log(res.data);
                this.parseData=res.data;
            }
        }
    };
</script>

<style scoped>
    .upload-demo{
        padding-left: 35rem;
        padding-top: 3rem;
        font-weight: bold;
        width: 30rem;
    }
    #button{
        margin-left: 33.75rem;
        width: 25rem;
    }
    .index{
        height: 100%;
        width: 100%;
        background: #FBFBEA;
    }
    .button{
        margin-top: 1rem;
        margin-left: 1rem;
    }
    #button1{
        margin-left: 33.75rem;
        width: 25rem;
    }
    .checkbox{
        width:60%;
        margin-left: 18rem;
        margin-top: 2rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
    .table{
        margin-left: 15rem;
    }
</style>